<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>退款申请 - 外咖后台</title>
		<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/static/css/jquery.typeahead.css" />
		<link rel="stylesheet" href="/static/layui/css/layui.css" />
		<link rel="stylesheet" href="/static/css/refundApplication.css" />
	</head>

	<body>
		<div style="padding: 3%;" class="layui-form">
			<div class="layui-row">
				<div class="layui-col-md7" id="title-top" style="padding-left: 18%;">退款申请记录</div>
				<div class="layui-col-md5">
					<div style="width: 33%;" class="layui-inline">
						<select id="status" lay-filter="status">
							<option value="">请选择退款状态</option>
							<option value="0">正在审核</option>
							<option value="1">审核失败</option>
							<option value="2">已退款</option>
						</select>
					</div>
					<div class="typeahead__container layui-inline">
						<div class="typeahead__field">
							<span class="typeahead__query">
								<input class="js-typeahead" id="searchBox" style="border-right: none;" 
									placeholder="请输入手机号" autocomplete="off">
								<button id="searchBtn">
									<span class="typeahead__search-icon" style="margin-left: -5px;"></span>
								</button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="layui-anim layui-anim-upbit" style="text-align: center;margin-bottom: 10%;">
			<table class="layui-table" lay-even>
				<colgroup>
					<col width="13%">
					<col width="13%">
					<col width="8%">
					<col width="8%">
					<col width="8%">
					<col width="15%">
					<col width="15">
					<col width="20%">
				</colgroup>
				<thead>
					<tr class="layui-bg-black">
						<th style="font-weight: bold;text-align: center;m">申请退款订单号</th>
						<th style="font-weight: bold;text-align: center;m">申请退款人手机号</th>
						<th style="font-weight: bold;text-align: center;m">订单金额</th>
						<th style="font-weight: bold;text-align: center;m">退款状态</th>
						<th style="font-weight: bold;text-align: center;m">支付平台</th>
						<th style="font-weight: bold;text-align: center;m">申请退款时间</th>
						<th style="font-weight: bold;text-align: center;m">确认退款时间</th>
						<th style="font-weight: bold;text-align: center;m">操作</th>
					</tr>
				</thead>
				<tbody id="content"></tbody>
			</table>

			<div id="page_info" style="padding-bottom: 8%;">
				<div id="pagination_overview"></div>
				<div id="page_nav_div" style="float: right; margin-right: 30px;"></div>
			</div>
		</div>
		
		<!-- 任务详情弹窗框架 -->
		<div style="display: none;width: 350px;height: 320px;" id="job-details-div">
			<table class="layui-table" style="text-align: center;">
				<colgroup>
					<col width="30%">
					<col width="70%">
				</colgroup>
				<thead>
					<tr>
						<th colspan="2" style="text-align: center;">任务详情</th>
					</tr>
				</thead>
				<tr>
					<td>任务名称</td>
					<td class="job-title"></td>
				</tr>
				<tr>
					<td>付款状态</td>
					<td class="job-whetherPay"></td>
				</tr>
				<tr>
					<td>审核状态</td>
					<td class="job-auditStatus"></td>
				</tr>
				<tr>
					<td>任务状态</td>
					<td class="job-status"></td>
				</tr>
				<tr>
					<td>任务报酬</td>
					<td class="job-price"></td>
				</tr>
				<tr>
					<td>创建时间</td>
					<td class="job-createTime"></td>
				</tr>
				<tr>
					<td>截止时间</td>
					<td class="job-deadTime"></td>
				</tr>
			</table>
		</div>

		<script type="text/javascript" src="/static/umeditor/third-party/jquery.min.js"></script>
		<script type="text/javascript" src="/static/js/jquery.typeahead.js"></script>
		<script type="text/javascript" src="/static/js/disable.js"></script>
		<script type="text/javascript" src="/static/layui/layui.all.js"></script>
		<script type="text/javascript" src="/static/js/refundApplication.js"></script>
	</body>

</html>